import {
  version,
  locale,
  i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  MessageBox,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Notification,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Message,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  Scrollbar,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer
} from 'element-ui'

Breadcrumb.props.separator.default = '>'

Switch.props.onValue.default = '0'
Switch.props.offValue.default = '1'

MessageBox._confirm = MessageBox.confirm
MessageBox.confirm = (content, title, props) => {
  return MessageBox._confirm(content, title, {
    customClass: 'dialog',
    ...props
  })
}

Upload.props.action.required = false
Upload.props.action.default = '/api/upload/image'

Carousel.beforeMount = function () { // 修正轮播图片在表单BUTTON提交的行为
  this.$nextTick(function () {
    Array.prototype.slice.call(this.$el.querySelectorAll('button')).forEach(function (item) {
      item.type = 'button'
    })
  })
}

Carousel.props.trigger.default = 'click'

Carousel.props.slides = {
  type: Number,
  default: 1
}

/*
*扩展Col组件百分比布局
*/
Col.props.spanPercent = {
  type: Number
}
if (!Col.updated && !Col.mounted) {
  Col.updated = Col.mounted = function () {
    if (this.spanPercent) {
      let width = `${this.spanPercent}%`
      if (this.$el.style.width !== width) {
        this.$el.style.width = width
      }
    }
  }
}

Form.props.labelWidth.default = '142px'

Pagination.props.layout.default = 'prev, pager, next, sizes, jumper, total'
Pagination.props.pageSizes.default = () => {
  return [15, 20, 30, 40, 50]
}
/*
*重写InputNumber默认行为
*/
InputNumber.props.value.default = null
InputNumber.props.validateEvent = true
InputNumber.props.controls = false // 默认不是控制按钮
InputNumber.props.debounce.default = 380
InputNumber.props.max.default = 100000
InputNumber.props.bit = {type: Number}
InputNumber.props.noZero = {type: Boolean, default: false}
InputNumber.created = () => {}
var noZero = function () {
  if (this.noZero && this.value === 0) {
    this.$el.querySelector('input').value = ''
  }
}
InputNumber.beforeMount = function () {
  var self = this
  this.$nextTick(() => {
    this.$el.addEventListener('keydown', function (e) {
      e.keyCode === 13 && self.handleBlur(e)
    }, false)
    this.$el.addEventListener('focusin', function (e) {
      e.target.select() // 得到焦点选中值
    }, false)
    if (self.$refs && self.$refs.input) {
      self.$refs.input.setCurrentValue = function (value) { // 重写 setCurrentValue控制validateEvent
        if (value === this.currentValue) return
        this.$nextTick(function () {
          this.resizeTextarea()
        })
        this.currentValue = value
        if (self.validateEvent) {
          this.dispatch('ElFormItem', 'el.form.change', [value])
        }
      }
    }
    noZero.call(this)
  })
}
InputNumber.updated = function () {
  this.$nextTick(function () {
    noZero.call(this)
  })
}
InputNumber.methods.debounceHandleInput = function () {}
InputNumber.methods.handleBlur = function (e) {
  var value = Number(e.target.value)
  if (!isNaN(value)) {
    let bValue = this.bit || 1
    let newValue = Math.round(1 / bValue * value) / (1 / bValue)
    this.setCurrentValue(newValue)
  } else {
    this.$refs.input.setCurrentValue(this.currentValue)
  }
  this.$nextTick(function () {
    noZero.call(this)
  })
}

if (!InputNumber.watch) {
  InputNumber.watch = {}
}
InputNumber.watch.noZero = function (value) {
  this.$nextTick(function () {
    noZero.call(this)
  })
}

DatePicker.props.editable = false
DatePicker.props.format = {
  type: String,
  default: 'yyyy-MM-dd'
}
if (!DatePicker.mounted && !DatePicker.updated) { // 对format ww 月周扩展
  DatePicker.mounted = DatePicker.updated = function () {
    let value = this.currentValue
    if (value && this.type === 'week' && this.format.indexOf('ww') > -1) {
      this.$nextTick(function () {
        var getMonthWeek = function (a, b, c) {
          var date = new Date(a, parseInt(b), c)
          var w = date.getDay()
          var d = date.getDate()
          return Math.ceil((d + 6 - w) / 7)
        }
        let currentValue = this.$el.querySelector('input').value
        this.$el.querySelector('input').value = currentValue.replace('ww', getMonthWeek(value.getFullYear(), value.getMonth(), value.getDate()))
      })
    }
  }
}

/*
* Input组件含输入文字数扩展
*/
Input.props.numberWord = {
  type: Boolean,
  default: false
}
if (!Input.updated && !Input.beforeMount) {
  Input.beforeMount = function () {
    if (this.numberWord) {
      this.$nextTick(function () {
        if (this.maxlength) {
          let node = document.createElement('div')
          node.className = 'el-input-word-counter'
          node.innerHTML = this.value.length + '/' + this.maxlength
          this.$el.appendChild(node)
          if (this.$el.classList) {
            this.$el.classList.add('el-input__number-word')
          } else if (this.$el.className.indexOf('el-input__number-word') === -1) {
            this.$el.className += ' el-input__number-word'
          }
        }
      })
    }
  }
  Input.updated = function () {
    if (this.numberWord) {
      let node = this.$el.querySelector('.el-input-word-counter')
      if (node) {
        node.innerHTML = this.value.length + '/' + this.maxlength
      }
    }
  }
}

export {
  version,
  locale,
  i18n,
  install,
  CollapseTransition,
  Loading,
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  MessageBox,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Notification,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Message,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  Scrollbar,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer
}
